<!DOCTYPE html>
<html lang="en">
    <head>
        {include file="public/header"}
    </head>
    <body>
	    <div class="wrapper">
		    {include file="public/nav"}
		    <div id="page-wrapper" style="min-height: 325px;">
			    <div class="row">
				    <div class="col-lg-12">
					    <h1 page-headerclass="page-header">AJAX实例</h1>
				    </div>

			    </div>

			    <div class="row">
				    <div class="col-lg-12">
                        <p><b>在输入框中输入一个姓名:</b></p>
                        <form> 
                            姓名: <input type="text" onkeyup="tajax(this.value)">
                        </form>
                        <p>返回值: <span id="txtHint"></span></p>

				    </div>

			    </div>

		    </div>
	    </div>
        
	    {include file="public/footer"}
        <script>
         function showHint(i)
         {

             xmlhttp = new XMLHttpRequest();
             xmlhttp.onreadystatechange=function(){
                 if (xmlhttp.readyState==4 && xmlhttp.status==200){
                     /*                          document.getElementById("txtHint").innerHTML= xmlhttp.responseText; */
                     /*                      console.log(xmlhttp.responseText); */
                     var data = JSON.parse(xmlhttp.responseText);
                     document.getElementById("txtHint").innerHTML= data.art_title;
                     

                 }
             }
             xmlhttp.open("GET","/public/index.php/admin/index/getarticle?id="+i,true);
             xmlhttp.send();
         }

        </script>

        <script type="text/javascript">
         function tajax(value){
             $.ajax({
                 type: "GET",
                 url: "/public/index.php/admin/index/getarticle",
                 data:{'id':value},
                 dataType:'json',
                 success:function(d){
                     /*                      data = JSON.parse(d) */
                     $('#txtHint').text(d.art_title);
                 }
             })
         }
        </script>
    </body>
</html>
